<template>
  <div class="xgrph-container">
    <!-- 头部标题 -->
    <div class="header">
      <div class="titleMain">锌锅热平衡</div>
    </div>

    <!-- Main Content Area (Three Columns) -->
    <div class="main-content">
      <!-- Left Panel (Charts) -->
      <div class="left-panel">
        <!-- Top Line Chart -->
        <div class="chart-card line-chart no-header">
          <div class="chart-content" ref="lineChartTopRef"></div>
        </div>
        <!-- Bottom Line Chart -->
        <div class="chart-card line-chart no-header">
          <div class="chart-content" ref="lineChartBottomRef"></div>
        </div>
      </div>

      <!-- Middle Panel (Diagram & Status Boxes) -->
      <div class="middle-panel">
        <!-- Alarm Banner (Stays outside the card for now) -->
        <!-- <div class="alarm-banner"><i class="fa fa-exclamation-triangle"></i> 报警信息 {{ warningMessage }}</div> -->
        <!-- Use NewCoilCard for the main middle content -->
        <NewCoilCard title="锌锅跟踪" class="middle-content-card">
          <!-- Middle Diagram Area -->
          <div class="process-diagram-area">
            <div class="system-status-bar">
              <div class="status-text">
                <i class="status-icon">//</i> 系统运行状态
                <span class="status-line">--------------</span>
                <div class="status-indicator">
                  <img src="../../assets/svgs/smile.svg" alt="运行" class="status-smile-icon" />
                  <span class="status-good">良好</span>
                </div>
              </div>
              <div class="system-status-bar-right">
                入锌锅温度历史值：{{ statusBoxData.stripTempSet }}°C &nbsp;| AI计算值:{{ statusBoxData.AISet }}°C &nbsp;| 实际值：{{
                  statusBoxData.steelTemReal
                }}°C
              </div>
            </div>
            <div class="scoll-text" v-if="p8SetLine?.p8SetCal">
              <span class="alarm-row-one-line marquee-text">
                P8设定值：{{ p8SetLine?.p8Set }}， P8计算值： {{ p8SetLine?.p8SetCal }}，状态：{{ p8SetLine?.istateA }}，备注：{{
                  p8SetLine?.notes2 ?? '无'
                }}，时间：{{ p8SetLine?.times }}
              </span>
            </div>
            <!-- REPLACED: Original Status Boxes Area with Top Data Boxes -->
            <div class="top-data-boxes-area">
              <div class="data-box top-box">
                <!-- Reusing .data-box style -->
                <div class="data-box-value">{{ dataBoxValues.width }}</div>
                <div class="data-box-label">宽度(mm)</div>
              </div>
              <div class="data-box top-box">
                <!-- Reusing .data-box style -->
                <div class="data-box-value">{{ dataBoxValues.thick }}</div>
                <div class="data-box-label">厚度(mm)</div>
              </div>
              <div class="data-box top-box">
                <!-- Reusing .data-box style -->
                <div class="data-box-value">{{ dataBoxValues.steelGrade }}</div>
                <div class="data-box-label">钢种</div>
              </div>
              <div class="data-box top-box" @click="p8DetailDialog()">
                <!-- Reusing .data-box style -->
                <div class="data-box-value-y">{{ p8SetLine?.p8SetCal ?? 0 }}</div>
                <div class="data-box-label">P8计算值</div>
              </div>
            </div>
            <div class="top-data-boxes-area" @click="pidHisDetailDialog()">
              <div class="data-box top-box">
                <!-- Reusing .data-box style -->
                <div class="data-box-value-y">{{ pidHis.pwt1Speed1 }}</div>
                <div class="data-box-label">快冷1风机1转速</div>
              </div>
              <div class="data-box top-box">
                <!-- Reusing .data-box style -->
                <div class="data-box-value-y">{{ pidHis.pwt1Speed2 }}</div>
                <div class="data-box-label">快冷1风机2转速</div>
              </div>
              <div class="data-box top-box">
                <!-- Reusing .data-box style -->
                <div class="data-box-value-y">{{ pidHis.pwt2Speed1 }}</div>
                <div class="data-box-label">快冷2风机1转速</div>
              </div>
              <div class="data-box top-box">
                <!-- Reusing .data-box style -->
                <div class="data-box-value-y">{{ pidHis.pwt2Speed2 }}</div>
                <div class="data-box-label">快冷2风机2转速</div>
              </div>
            </div>

            <!-- ADDED: Diagram specific text overlays -->
            <div class="diagram-text rapid-cool-text">
              快冷温度预测值 {{ statusBoxData.fastCoolTempReal }}°C &nbsp;| 实际值：{{ statusBoxData.fastCoolTempSet }}°C
            </div>
            <div class="diagram-text strip-entry-text">
              带钢入锌锅温度 历史值: {{ statusBoxData.stripTempSet }}°C &nbsp;| AI计算值:{{ statusBoxData.AISet }}°C &nbsp;| 实际值:
              {{ statusBoxData.steelTemReal }}°C
            </div>
            <div class="diagram-text strip-entry-text-p8">
              P8是否投用: <el-text>{{ usedData.p8 }}</el-text>
            </div>
            <div class="diagram-text strip-entry-text-p9">
              P9是否投用: <el-text>{{ usedData.p9 }}</el-text>
            </div>
            <div class="diagram-text strip-entry-text-w1">
              风机1是否投用: <el-text>{{ usedData.w1 }}</el-text>
            </div>
            <div class="diagram-text strip-entry-text-w2">
              风机2是否投用: <el-text>{{ usedData.w2 }}</el-text>
            </div>
            <div class="diagram-text strip-entry-text-w3">
              风机3是否投用: <el-text>{{ usedData.w3 }}</el-text>
            </div>
            <div class="diagram-text strip-entry-text-w4">
              风机4是否投用: <el-text>{{ usedData.w4 }}</el-text>
            </div>

            <!-- New container for SVG and Table -->
            <div class="middle-main-content">
              <!-- Placeholder for SVG -->
              <div class="svg-placeholder"></div>
            </div>

            <!-- REPLACED: Content of Data Boxes Overlay -->
            <div class="data-boxes-overlay new-bottom-boxes">
              <!-- Add new class to scope styles -->
              <!-- Row 1: zincMelt, zincIngotTemp, zincLiquidTemp -->
              <div class="data-box-row">
                <div class="data-box bottom-box">
                  <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.amount }}</div>
                  <div class="data-box-label">锌锭融化量(kg/min)</div>
                </div>
                <!-- REMOVED Spacer -->
                <div class="data-box bottom-box">
                  <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.speed }}</div>
                  <!-- Placeholder for zinc ingot temp -->
                  <div class="data-box-label">工艺段速度(m/min)</div>
                </div>
                <div class="data-box bottom-box">
                  <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.pot }}</div>
                  <div class="data-box-label">GI/GA</div>
                </div>
              </div>
              <!-- Row 2: potBottomTemp, potWallTemp, potPower -->
              <div class="data-box-row">
                <div class="data-box bottom-box">
                  <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.power }}</div>
                  <div class="data-box-label">锌锅功率(KW)</div>
                </div>
                <div class="data-box bottom-box">
                  <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.outPotTem }}</div>
                  <div class="data-box-label">锌锅外壁温度(°C)</div>
                </div>
                <div class="data-box bottom-box">
                  <!-- Reusing .data-box style -->
                  <div class="data-box-value">{{ dataBoxValues.potBottomTemp }}</div>
                  <div class="data-box-label">锌锅底部温度(°C)</div>
                </div>
              </div>
            </div>
          </div>
        </NewCoilCard>
      </div>

      <!-- Right Panel (Tables & Chart) -->
      <div class="right-panel">
        <!-- Use NewCoilCard for Top Table -->
        <NewCoilCard title="当前钢卷信息" class="right-table-card top-table">
          <el-table
            :data="topTableData"
            style="width: 100%; height: 100%"
            border
            size="small"
            :header-cell-style="rightTableHeaderStyle"
            :cell-style="rightTableCellStyle"
          >
            <el-table-column prop="label" label="参数" />
            <el-table-column prop="value" label="值" />
          </el-table>
        </NewCoilCard>
        <!-- Use NewCoilCard for Bottom Table -->
        <NewCoilCard title="下一卷钢卷信息" class="right-table-card bottom-table">
          <el-table
            :data="bottomTableData"
            style="width: 100%; height: 100%"
            border
            size="small"
            :header-cell-style="rightTableHeaderStyle"
            :cell-style="rightTableCellStyle"
          >
            <el-table-column prop="label" label="参数" />
            <el-table-column prop="value" label="值" />
          </el-table>
        </NewCoilCard>
        <!-- New Chart Card -->
        <NewCoilCard title="实时历史数据" class="right-chart-card">
          <div class="chart-content" ref="rightChartRef"></div>
        </NewCoilCard>
      </div>
    </div>
  </div>

  <el-dialog v-model="p8CalVisible" :title="p8CalDialogTitle" ref="p8CalDialogRef" @closed="cancel" class="p8CalDialog">
    <el-table
      :data="p8CalDialogTableData"
      :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      show-overflow-tooltip
    >
      <el-table-column prop="p8Set" label="p8设定值" />
      <el-table-column prop="p8SetCal" label="p8计算值" />
      <el-table-column prop="istateA" label="状态" />
      <el-table-column prop="notes2" label="备注" />
      <el-table-column prop="times" label="时间" />
    </el-table>
  </el-dialog>

  <el-dialog v-model="pidHisVisible" :title="pidHisDialogTitle" ref="pidHisDialogRef" @closed="cancel" class="pidHisDialog">
    <el-table
      :data="pidHisDialogTableData"
      :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      show-overflow-tooltip
    >
      <el-table-column prop="pwt1Speed1" label="快冷1风机1转速计算值" />
      <el-table-column prop="pwt1Speed2" label="快冷1风机2转速计算值" />
      <el-table-column prop="pwt2Speed1" label="快冷2风机1转速计算值" />
      <el-table-column prop="pwt2Speed2" label="快冷2风机2转速计算值" />
      <el-table-column prop="wt1Speed1" label="快冷1风机1转速" />
      <el-table-column prop="wt1Speed2" label="快冷1风机2转速" />
      <el-table-column prop="wt2Speed1" label="快冷2风机1转速" />
      <el-table-column prop="wt2Speed2" label="快冷2风机2转速" />
      <el-table-column prop="createTime" label="创建时间" />
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue';
  import * as echarts from 'echarts/core';
  import { BarChart, LineChart } from 'echarts/charts';
  import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';
  import NewCoilCard from '../../components/NewCoilCard/NewCoilCard.vue'; // Corrected import path
  import { tbZincPotOutApi } from '/@/api/znpot/index';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import dayjs from 'dayjs';
  import Index from '/@/components/framework/area-cascader/index.vue';
  import { rollingSimulationApi } from '/@/api/RollingSimulation/index';
  import { refreshSVG, initialSVG, refreshGraphical } from '/@/common/refreshSVG';
  import { useUserStore } from '/@/store/modules/system/user';
  import { furnaceTempDynamicCtrlApi } from '/@/api/furnaceTempDynamicCtrl/index';

  // Register ECharts components
  echarts.use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, LineChart, CanvasRenderer, MarkLineComponent]);

  // --- Refs for Charts ---
  const lineChartTopRef = ref<HTMLElement | null>(null);
  const lineChartBottomRef = ref<HTMLElement | null>(null);
  const rightChartRef = ref<HTMLElement | null>(null);

  // --- ECharts Instances ---
  let lineChartTopInstance: echarts.ECharts | null = null;
  let lineChartBottomInstance: echarts.ECharts | null = null;
  let rightChartInstance: echarts.ECharts | null = null;

  let interval: any = null;
  let interval2: any = null;
  let interval6: any = null;
  let interval10: any = null;
  const dataTimeX = ref<string[]>([]);
  const topGraphReal = ref<number[]>([]);
  const topGraphSet = ref<number[]>([]);

  const bouttomDataX = ref<string[]>([]);
  const steelData = ref<number[]>([]);
  const potBottomTempData = ref<number[]>([]);
  const fastCoolTempData = ref<number[]>([]);

  const inletLooper = ref<number>(0);
  const middleLooper = ref<number>(0);
  const exportLooper = ref<number>(0);
  const technologicalName = 'image';

  // -------------------------------------- dialog 相关 -----------------------------------------
  // const p8SetCal = ref('');
  const p8SetLine = ref();
  const pidHis = ref({
    pwt1Speed2: '0',
    pwt2Speed1: '0',
    pwt2Speed2: '0',
    pwt1Speed1: '0',
  });
  const p8CalVisible = ref(false);
  const p8CalDialogTitle = ref('P8设定');
  const p8CalDialogTableData = ref<any>([]);
  const pidHisVisible = ref(false);
  const pidHisDialogTitle = ref('风机转速');
  const pidHisDialogTableData = ref<any>([]);

  // 详情弹窗取消事件
  const cancel = () => {
    p8CalVisible.value = false;
    pidHisVisible.value = false;
  };

  const fetchP8DialogData = async (val: number) => {
    try {
      const res = await tbZincPotOutApi.getP8Calc();
      res.data.forEach((item: any) => {
        let remark = '';
        const istateA = item.istateA;

        if (istateA <= 4) {
          remark += '当前卷与下一卷不一致/下一卷规格变化/';
          remark += istateA <= 2 ? '非特殊钢种/' : '特殊钢种/';
          remark += istateA == 1 || istateA == 3 ? '有历史数据' : '无历史数据';
        } else if (istateA >= 7) {
          remark += '当前卷与下一卷一致/当前卷速度变化/';
          remark += istateA <= 8 ? '非特殊钢种/' : '特殊钢种/';
          remark += istateA == 7 || istateA == 9 ? '有历史数据' : '无历史数据';
        } else {
          remark += '当前卷与下一卷一致/下一卷规格无变化/';
          remark += istateA == 5 ? '非特殊钢种/有历史数据' : '特殊钢种/有历史数据';
        }

        item.istateA = remark;
      });
      if (val == 10) {
        p8CalDialogTableData.value = res.data;
      } else if (val == 1) {
        p8SetLine.value = res.data[0] ?? [];
      }
    } catch (error) {
      console.error('p8数据获取失败:' + error);
    }
  };

  const fetchpidHisDialogData = async (val: number) => {
    try {
      const res = await tbZincPotOutApi.getWindTurbine();
      if (val == 10) {
        pidHisDialogTableData.value = res.data;
      }
      pidHis.value = res.data[0];
    } catch (error) {
      console.error('风机数据获取失败:' + error);
    }
  };

  const p8DetailDialog = () => {
    p8CalVisible.value = true;
    fetchP8DialogData(10);
  };

  const pidHisDetailDialog = () => {
    pidHisVisible.value = true;
    fetchpidHisDialogData(10);
  };

  // --- State ---

  // --- 表格样式 ---
  const headerCellStyle = {
    background: '#234584',
    color: '#fff',
    padding: '8px 0',
    textAlign: 'center',
    fontWeight: 'normal',
    borderBottom: '1px solid #0a1a3a',
  };

  const rightTableCellStyle = {
    padding: '4px 0',
    textAlign: 'center',
    color: '#c0c4cc',
    borderBottom: '1px solid #06279d',
    borderRight: '1px solid #06279d',
    fontSize: '12px',
    // 统一高度，去除vh自适应，保证两表格一致
  };

  // --- 生产统计信息 ---
  const productionStats = reactive({
    dailyOutput: 1028.3,
    actualHourlyOutput: 152.5,
    hourlyOutput: 135.0,
    processSpeed: 210.7,
  });

  // --- 张力信息 ---
  const tensionInfo = reactive({
    set: 8.0,
    actual: 2.5,
  });

  let tr: any = null;
  let por: any = null;
  let ti: any = null;

  // --- 警告信息 ---
  const warningMessage = ref('每多消耗1km高炉煤气,影响成本125.59元');

  // --- Status Box Data (Middle Panel) ---
  const statusBoxData = reactive({
    fastCoolTempSet: 0, // 快冷温度预测值
    fastCoolTempReal: 0, // 快冷温度实际值
    steelTemReal: 0, // 带钢入锌锅温度实际值
    stripTempSet: 0, // 带钢入锌锅温度预测值
    AISet: 0, // AI计算值
  });

  const usedData = reactive({
    p8: '',
    p9: '',
    w1: '',
    w2: '',
    w3: '',
    w4: '',
  });

  // --- Data Box Values (Middle Panel Bottom - From Image) ---
  const dataBoxValues = reactive({
    width: '0', // 宽度
    thick: '0.00', // 厚度
    steelGrade: '', // 钢种
    amount: '0', // 锌锭融化量
    speed: '', // 工艺段速度
    pot: '', // 0-GA/1-GI
    power: '0', // 锌锅功率
    potBottomTemp: '0', // 锌锅底部温度(°C)
    outPotTem: '0', // 锌锅外壁温度(°C)
  });

  // --- Middle Table Data ---
  const middleTableData = ref<InfoTableRow[]>([
    { label: '参数A', value: '示例值A' },
    { label: '参数B', value: 123.45 },
    { label: '参数C', value: '示例值C' },
    { label: '参数D', value: 678 },
    { label: '参数E', value: '示例值E' },
    { label: '参数F', value: 9.01 },
  ]);

  // --- Define interface and data for right-side tables ---
  interface InfoTableRow {
    label: string;
    value: string | number;
  }

  const topTableData = ref<InfoTableRow[]>([
    { label: '钢卷号', value: '' },
    // { label: '订单牌号', value: 'DC51D-1' },
    // { label: '镀层规格(g/m²)', value: 80 },
    { label: '钢种', value: '' },
    { label: '带钢宽度(mm)', value: 0 },
    { label: '带钢厚度(mm)', value: 0 },
    { label: '带钢速度(m/min)', value: 0 },
    { label: '液锌温度(°C)', value: 0 },
    // { label: '带钢张力(kN)', value: 32.77 },
    // { label: '正面气刀角度(°)', value: -0.5 },
    // { label: '背面气刀角度(°)', value: -0.63 },
    // { label: '头部位移(m)', value: 1047.05 },
  ]);

  const bottomTableData = ref<InfoTableRow[]>([
    { label: '钢卷号', value: '' },
    // { label: '订单牌号', value: 'DC51D-1' },
    { label: '钢种', value: 0 }, // Placeholder
    { label: '计划号', value: '' },
    { label: '重量', value: '' },
    { label: '带钢宽度(mm)', value: 0 }, // Placeholder
    { label: '带钢厚度(mm)', value: 0.0 }, // Placeholder
    { label: '上表面镀层重量目标值', value: 0 },
    { label: '下表面镀层重量目标值', value: 0.0 },
    // { label: '焊缝至气刀距离(m)', value: 13.23 },
    // { label: '焊缝至测厚仪距离(m)', value: 32.77 },
    // { label: '气刀压力设定值(mbar)', value: -0.5 },
    // { label: '气刀距离设定值(mm)', value: -0.63 },
    // { label: '气刀高度设定值(mm)', value: 1047.05 },
  ]);

  // --- Define styles for right-side tables (can be customized further in CSS) ---
  const rightTableHeaderStyle = {
    background: '#183272', // Darker blue for header
    color: '#b8e8ff',
    padding: '6px 0',
    textAlign: 'center',
    fontWeight: 'normal',
    borderBottom: '1px solid #06279d', // Use the border color from image
  };

  // --- 图表配置 ---
  const lineChartOption_Top = ref<any>({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    // ADDED: Legend configuration
    legend: {
      data: ['带钢入锌锅温度实际值', '带钢入锌锅温度预测值'],
      right: '4%',
      top: '0%', // Position at the top
      textStyle: {
        color: '#c0c4cc',
        fontSize: 10,
      },
      itemWidth: 15,
      itemHeight: 10,
    },
    // MODIFIED: Adjusted grid to make space for legend
    grid: { left: '3%', right: '4%', bottom: '5%', top: '15%', containLabel: true }, // Increased top margin
    xAxis: {
      type: 'category',
      // boundaryGap: false,
      data: dataTimeX.value,
      axisLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.5)' } },
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
    },
    yAxis: {
      type: 'value',
      min: 38,
      max: 47,
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
      splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
      axisLine: { show: false },
    },
    series: [
      {
        name: '带钢入锌锅温度实际值',
        type: 'line',
        smooth: false,
        symbol: 'none',
        force: {
          layoutAnimation: false,
        },
        data: topGraphReal.value,
        lineStyle: { color: '#f4c74f', width: 1 },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(244, 199, 79, 0.5)' },
            { offset: 1, color: 'rgba(244, 199, 79, 0.1)' },
          ]),
        },
      },
      {
        name: '带钢入锌锅温度预测值',
        type: 'line',
        smooth: false,
        symbol: 'none',
        force: {
          layoutAnimation: false,
        },
        data: topGraphSet.value,
        lineStyle: { color: '#2af598' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(42, 245, 152, 0.5)' },
            { offset: 1, color: 'rgba(42, 245, 152, 0.1)' },
          ]),
        },
      },
    ],
  });

  const lineChartOption_Bottom = computed(() => ({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    // ADDED: Title for historical real values
    title: {
      text: '历史真实值',
      left: '3%',
      top: '2%',
      textStyle: {
        color: '#c0c4cc',
        fontSize: 12,
        fontWeight: 'normal',
      },
    },
    // ADDED: Legend configuration
    legend: {
      data: ['入锌锅温度', '锌液温度', '快冷温度'],
      right: '4%',
      top: '0%', // Position at the top
      textStyle: {
        color: '#c0c4cc',
        fontSize: 10,
      },
      itemWidth: 15,
      itemHeight: 10,
    },
    // MODIFIED: Adjusted grid to make space for legend and title
    grid: { left: '3%', right: '4%', bottom: '5%', top: '20%', containLabel: true }, // Increased top margin
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: bouttomDataX.value,
      axisLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.5)' } },
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
    },
    yAxis: {
      type: 'value',
      min: 38,
      max: 47,
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
      splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
      axisLine: { show: false },
    },
    series: [
      // MODIFIED: Updated series names
      {
        name: '入锌锅温度',
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        data: steelData.value,
        lineStyle: { color: '#00baff' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 186, 255, 0.6)' },
            { offset: 1, color: 'rgba(0, 186, 255, 0.1)' },
          ]),
        },
      },
      {
        name: '锌液温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: potBottomTempData.value,
        lineStyle: { color: '#f4c74f' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(244, 199, 79, 0.5)' },
            { offset: 1, color: 'rgba(244, 199, 79, 0.1)' },
          ]),
        },
      },
      {
        name: '快冷温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: fastCoolTempData.value,
        lineStyle: { color: '#ff6b6b' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255, 107, 107, 0.5)' },
            { offset: 1, color: 'rgba(255, 107, 107, 0.1)' },
          ]),
        },
      },
    ],
  }));

  // --- Right Chart Option ---
  const rightChartX = ref<string[]>([]);
  const rightChartY1 = ref<number[]>([]); // 锌液温度
  const rightChartY2 = ref<number[]>([]); // p8温度
  const rightChartY3 = ref<number[]>([]); // p9温度
  const rightChartY4 = ref<number[]>([]); // p10温度

  const rightChartOption = ref<any>({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: {
      data: ['锌液温度', 'p10温度', 'p8温度', 'p9温度'],
      right: '4%',
      top: '0%',
      textStyle: {
        color: '#fff',
        fontSize: 10,
      },
      itemWidth: 15,
      itemHeight: 10,
    },
    grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: rightChartX.value,
      axisLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.5)' } },
      axisLabel: {
        color: '#c0c4cc',
        fontSize: 10,
        interval: 0,
        formatter: function (value: string) {
          return value || '';
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
      splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
      axisLine: { show: false },
    },
    series: [
      {
        name: '锌液温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: rightChartY1.value,
        lineStyle: { color: '#00baff' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 186, 255, 0.6)' },
            { offset: 1, color: 'rgba(0, 186, 255, 0.1)' },
          ]),
        },
      },
      {
        name: 'p10温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: rightChartY4.value,
        lineStyle: { color: '#43d957' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(67, 217, 87,  0.5)' },
            { offset: 1, color: 'rgba(67, 217, 87,  0.1)' },
          ]),
        },
      },
      {
        name: 'p8温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: rightChartY2.value,
        lineStyle: { color: '#f4c74f' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(244, 207, 79, 0.5)' },
            { offset: 1, color: 'rgba(244, 207, 79, 0.1)' },
          ]),
        },
      },
      {
        name: 'p9温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: rightChartY3.value,
        lineStyle: { color: '#ff6b6b' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255, 107, 107, 0.5)' },
            { offset: 1, color: 'rgba(255, 107, 107, 0.1)' },
          ]),
        },
      },
    ],
  });

  // --- SVG交互 ---
  const onSvgLoaded = () => {
    console.log('SVG图片加载完成');

    // 简化SVG加载事件，暂时移除SVG DOM操作
    try {
      // SVG加载成功
      console.log('SVG加载成功');
    } catch (error) {
      console.error('SVG操作失败:', error);
    }
  };

  // --- 初始化图表 ---
  const initCharts = () => {
    try {
      if (lineChartTopRef.value && !lineChartTopInstance) {
        lineChartTopInstance = echarts.init(lineChartTopRef.value);
        lineChartTopInstance.setOption(lineChartOption_Top.value);
      }
      if (lineChartBottomRef.value && !lineChartBottomInstance) {
        lineChartBottomInstance = echarts.init(lineChartBottomRef.value);
        lineChartBottomInstance.setOption(lineChartOption_Bottom.value);
      }
      if (rightChartRef.value && !rightChartInstance) {
        rightChartInstance = echarts.init(rightChartRef.value);
        rightChartInstance.setOption(rightChartOption.value);
        // console.log('rightChartInstance 初始化', rightChartInstance, rightChartOption.value);
      }
    } catch (error) {
      console.error('图表初始化失败:', error);
    }
  };

  const updateCharts = () => {
    // top chart
    lineChartOption_Top.value.xAxis.data = dataTimeX.value;
    lineChartOption_Top.value.series[0].data = topGraphReal.value;
    lineChartOption_Top.value.series[1].data = topGraphSet.value;
    const realMin = Math.min(...(topGraphReal.value ?? [0]));
    const realMax = Math.max(...(topGraphReal.value ?? [0]));
    const setMin = Math.min(...(topGraphSet.value ?? [0]));
    const setMax = Math.max(...(topGraphSet.value ?? [0]));
    lineChartOption_Top.value.yAxis.min = Math.floor(Math.min(realMin, setMin) - 1);
    lineChartOption_Top.value.yAxis.max = Math.floor(Math.max(realMax, setMax) + 1);
    lineChartTopInstance?.setOption(lineChartOption_Top.value, true);
    // bottom chart
    lineChartOption_Bottom.value.xAxis.data = bouttomDataX.value;
    lineChartOption_Bottom.value.series[0].data = steelData.value;
    lineChartOption_Bottom.value.series[1].data = potBottomTempData.value;
    lineChartOption_Bottom.value.series[2].data = fastCoolTempData.value;
    const steelMin = Math.min(...(steelData.value ?? [0]));
    const steelMax = Math.max(...(steelData.value ?? [0]));
    const potMin = Math.min(...(potBottomTempData.value ?? [0]));
    const potMax = Math.max(...(potBottomTempData.value ?? [0]));
    const fastCoolMin = Math.min(...(fastCoolTempData.value ?? [0]));
    const fastCoolMax = Math.max(...(fastCoolTempData.value ?? [0]));
    lineChartOption_Bottom.value.yAxis.min = Math.floor(Math.min(steelMin, potMin, fastCoolMin) - 10);
    lineChartOption_Bottom.value.yAxis.max = Math.floor(Math.max(steelMax, potMax, fastCoolMax) + 10);
    lineChartBottomInstance?.setOption(lineChartOption_Bottom.value, true);
  };

  const resizeCharts = () => {
    lineChartTopInstance?.resize();
    lineChartBottomInstance?.resize();
    rightChartInstance?.resize();
  };

  // --- 生命周期钩子 ---
  let updateTimer: number | null = null;

  const fetchData = async () => {
    try {
      const response = await tbZincPotOutApi.getData({});
      if (response.data) {
        dataBoxValues.width = response.data.data.width.toFixed(2);
        dataBoxValues.thick = response.data.data.thick.toFixed(2);
        dataBoxValues.steelGrade = response.data.data.steelgrade;
        dataBoxValues.outPotTem = response.data.data.out_tem_pot.toFixed(2);
        dataBoxValues.power = response.data.data.pw.toFixed(2);
        dataBoxValues.amount = response.data.data.xin_g.toFixed(2);
        dataBoxValues.pot = response.data.data.pot == '0' ? 'GA锅' : 'GI锅';
        dataBoxValues.speed = response.data.data.speed.toFixed(2);
        dataBoxValues.potBottomTemp = response.data.data.out_tem_pot_di.toFixed(2);
        statusBoxData.fastCoolTempReal = response.data.data.kuai_act.toFixed(2);
        statusBoxData.fastCoolTempSet = response.data.data.kuai_set.toFixed(2);
        statusBoxData.steelTemReal = response.data.data.steel_tem.toFixed(2);
        statusBoxData.stripTempSet = response.data.data.cgl_znpot_temp_avg.toFixed(2);
        statusBoxData.AISet = response.data.data.cgl_znpot_temp_avg_1.toFixed(2);
        topTableData.value[0].value = response.data.bean.first.entid;
        topTableData.value[1].value = response.data.bean.first.steelgrade;
        topTableData.value[2].value = response.data.bean.first.width.toFixed(2);
        topTableData.value[3].value = response.data.bean.first.thick.toFixed(2);
        topTableData.value[4].value = response.data.bean.first.speed.toFixed(2);
        topTableData.value[5].value = response.data.bean.first.ye_tem.toFixed(2);
        bottomTableData.value[0].value = response.data.bean.next.entid;
        bottomTableData.value[1].value = response.data.bean.next.steelgrade1;
        bottomTableData.value[2].value = response.data.bean.next.plan_no;
        bottomTableData.value[3].value = response.data.bean.next.out_mat_wt.toFixed(2);
        bottomTableData.value[4].value = response.data.bean.next.width1.toFixed(2);
        bottomTableData.value[5].value = response.data.bean.next.thick1.toFixed(2);
        bottomTableData.value[6].value = response.data.bean.next.targcoatthkup.toFixed(2);
        bottomTableData.value[7].value = response.data.bean.next.targcoatthkdown.toFixed(2);

        //
        steelData.value = [];
        potBottomTempData.value = [];
        fastCoolTempData.value = [];
        bouttomDataX.value = [];
        response.data.countList.forEach((item: any, index: number) => {
          steelData.value.push(item.steel);
          potBottomTempData.value.push(item.pot);
          fastCoolTempData.value.push(item.P8 || 0);
          bouttomDataX.value.push((index + 1).toString());
        });
        // TODO 临时处理（过后需删！）
        if (steelData.value.length == 1 && potBottomTempData.value.length == 1 && bouttomDataX.value.length == 1) {
          steelData.value.push(steelData.value[0]);
          potBottomTempData.value.push(potBottomTempData.value[0]);
          fastCoolTempData.value.push(fastCoolTempData.value[0]);
          bouttomDataX.value.push(bouttomDataX.value[0] + 1);
        }

        topGraphReal.value.push(response.data.data.steel_tem.toFixed(2));
        topGraphSet.value.push(response.data.data.cgl_znpot_temp_avg.toFixed(2));
        dataTimeX.value.push(dayjs().format('HH:mm:ss'));
      }
    } catch (error) {
      ElMessage.error('数据获取失败');
    }
  };

  const fetchRightChartData = async () => {
    try {
      const res = await tbZincPotOutApi.findByPage_all({});
      if (res.data && Array.isArray(res.data.data)) {
        // 按时间正序显示（左旧右新）
        const rows = [...res.data.data].reverse();
        // 取全部时间（已按正序）
        const allTimes = rows.map((item: any) => item.create_time || '');
        // 计算5个关键点索引
        const n = allTimes.length;
        let idxs: number[] = [];
        if (n <= 5) {
          idxs = Array.from({ length: n }, (_, i) => i);
        } else {
          idxs = [0, Math.floor(n / 4), Math.floor(n / 2), Math.floor((n * 3) / 4), n - 1];
          idxs = Array.from(new Set(idxs));
        }
        // 构造x轴label
        const xLabels = allTimes.map((t: any, i: number) => (idxs.includes(i) ? t : ''));
        rightChartX.value = xLabels;
        rightChartY1.value = rows.map((item: any) => Number(item.cgl_gi_znpot_temp) || 0);
        rightChartY2.value = rows.map((item: any) => Number(item.p8_act) || 0);
        rightChartY3.value = rows.map((item: any) => Number(item.p9_set) || 0);
        rightChartY4.value = rows.map((item: any) => Number(item.p10_act) || 0);
        // 更新option
        rightChartOption.value.xAxis.data = rightChartX.value;
        rightChartOption.value.series[0].data = rightChartY1.value;
        rightChartOption.value.series[2].data = rightChartY2.value;
        rightChartOption.value.series[3].data = rightChartY3.value;
        rightChartOption.value.series[1].data = rightChartY4.value;
        // 动态调整y轴范围
        const allY = [...rightChartY1.value, ...rightChartY2.value, ...rightChartY3.value, ...rightChartY4.value];
        if (allY.length > 0) {
          rightChartOption.value.yAxis.min = Math.floor(Math.min(...allY) - 2);
          rightChartOption.value.yAxis.max = Math.ceil(Math.max(...allY) + 2);
        }
        await nextTick();
        if (rightChartInstance) {
          rightChartInstance.setOption(rightChartOption.value, true);
          // console.log('实时历史数据折线图 setOption', rightChartOption.value);
        } else {
          console.warn('rightChartInstance 未初始化');
        }
      }
    } catch (e) {
      ElMessage.error('新折线图数据获取失败');
      console.error(e);
    }
  };

  const menuData = ref([
    { menuName: 'CGL1870XGRPH', menuTitle: '锌锅热平衡主页面', menuId: '1' },
    { menuName: 'CAL1870Rreport', menuTitle: '模型准确率统计报表' },
    { menuName: 'overrun', menuTitle: '锌锅温度超限报表' },
    { menuName: 'moltenZincHistory', menuTitle: '锌液历史记录' },
  ]);
  onBeforeMount(() => {
    useUserStore().setTagNav(menuData.value);
  });

  onMounted(() => {
    nextTick(() => {
      initCharts();
      fetchRightChartData();
      fetchP8DialogData(1);
      fetchpidHisDialogData(1);
      runInterval();
    });
    const runInterval = async () => {
      try {
        await Promise.all([
          fetchData(), // 慢接口，现在会等待它执行完再继续
        ]);
      } catch (err) {
        console.error('interval任务出错:', err);
      } finally {
        interval2 = setTimeout(runInterval, 0);
      }
    };
    // 启动第一个任务
    // interval = setTimeout(runInterval, 0);
    interval2 = setInterval(() => {
      // 跟踪
      getZoneTrk();
      // 投用
      inServiceStatus();
    }, 2000);
    interval6 = setInterval(() => {
      fetchP8DialogData(1);
      fetchpidHisDialogData(1);
    }, 6000);
    interval10 = setInterval(() => {
      fetchRightChartData();
    }, 10000);
    window.addEventListener('resize', resizeCharts);
  });

  watch(
    () => {
      return dataTimeX.value?.length;
    },
    () => {
      updateCharts();
      if (dataTimeX.value.length > 60) {
        dataTimeX.value.shift();
        topGraphSet.value.shift();
        topGraphReal.value.shift();
      }
    }
  );

  onUnmounted(() => {
    window.removeEventListener('resize', resizeCharts);
    lineChartTopInstance?.dispose();
    lineChartBottomInstance?.dispose();
    rightChartInstance?.dispose();
    clearInterval(interval2);
    clearInterval(interval6);
    clearInterval(interval10);
  });

  // 钢卷跟踪
  async function getZoneTrk() {
    let param = {
      name: 'CGL1870_zonetrk',
    };
    rollingSimulationApi.rest(param).then((res) => {
      let zones = res.data.zoneno;
      //weldMachineState(`${technologicalName}-welder`, res.data.weld);
      inletLooper.value = res.data['loop'][0];
      middleLooper.value = res.data['loop'][1];
      exportLooper.value = res.data['loop'][2];
      let trKey = `${technologicalName}-ZONE_tr${res.data.tr}`;
      let trpathKey = trKey + '_path';
      let porKey = `${technologicalName}-ZONE_por${res.data.por}`;
      let porpathKey = porKey + '_path';
      var arr = Object.keys(zones);
      /**开卷机和卷取机 */
      if (tr === null || tr !== res.data.tr) {
        tr = res.data.tr;
        refreshSVG(zones[arr.length - 1].ti % 10, trpathKey);
        refreshGraphical(zones[arr.length - 1].ti % 10, trKey);
        initialSVG(technologicalName, 'tr', res.data.tr);
      }
      if (por === null || por !== res.data.por) {
        por = res.data.por;
        if (res.data.por === 0) {
          initialSVG(technologicalName, 'por', '1');
          initialSVG(technologicalName, 'por', '2');
        }
      }
      if (ti === null || ti !== zones[0].ti) {
        ti = zones[0].ti;
        refreshSVG(zones[0].ti % 10, porpathKey);
        refreshGraphical(zones[0].ti % 10, porKey);
        initialSVG(technologicalName, 'por', res.data.por);
      }
      for (let i in zones) {
        let pathkey = `${technologicalName}-ZONE${i}`;
        // console.log('测试：' + pathkey);
        // console.log('颜色：' + (zones[i].ti % 10));
        refreshSVG(zones[i].ti % 10, pathkey);
      }
    });
  }

  // 投用状态
  const inServiceStatus = async () => {
    try {
      const param = {
        name: 'CGL1870_RealData',
      };
      const res = await furnaceTempDynamicCtrlApi.getDewPointData(param);
      if (res && res.data) {
        usedData.p8 = res.data.DB17_DBW140 == 1 ? 'AI模式' : '原模式';
        usedData.p9 = res.data.DB17_DBD142 == 1 ? 'AI模式' : '原模式';
        usedData.w1 = res.data.DB18_DBX36_5 == 1 ? 'AI模式' : '原模式';
        usedData.w2 = res.data.DB18_DBX38_5 == 1 ? 'AI模式' : '原模式';
        usedData.w3 = res.data.DB18_DBX40_5 == 1 ? 'AI模式' : '原模式';
        usedData.w4 = res.data.DB18_DBX42_5 == 1 ? 'AI模式' : '原模式';
      }
    } catch (err) {
      ElMessage.error('投用状态获取失败');
    }
  };
</script>

<style scoped>
  .xgrph-container {
    position: relative;
    background: url('../../assets/images/body-bg.jpg') no-repeat center center;
    background-size: cover;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    color: #fff;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    display: flex;
    flex-direction: column;
  }

  /* 头部样式 */
  .header {
    flex: 0 0 60px;
    background-image: url('../../assets/images/head-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 10;
    padding-top: 3px;
    margin-bottom: -15px;
  }

  .titleMain {
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    text-shadow:
      0 0 10px #42b4ff,
      0 0 20px #0a2466;
    letter-spacing: 2px;
  }

  /* Main Layout Styles - Modified for Three Columns */
  .main-content {
    display: flex;
    flex-grow: 1;
    padding: 0 5px 5px 5px;
    overflow: hidden;
  }

  .left-panel {
    display: flex;
    flex-direction: column;
    width: 28%;
    /* Narrower */
    margin-right: 5px;
  }

  /* Middle Panel Styles */
  .middle-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Takes remaining space */
    margin-right: 5px;
    overflow: hidden;
  }

  .right-panel {
    display: flex;
    flex-direction: column;
    width: 28%;
    position: relative;
    /* Narrower */
    overflow: hidden;
  }

  /* Status Boxes Area Styles (Middle Panel) */
  .status-boxes-area {
    display: flex;
    justify-content: space-around;
    /* Or space-between */
    align-items: center;
    margin-bottom: 5px;
    /* Space below boxes */
    padding: 10px 0;
    /* Add some vertical padding */
    flex-wrap: wrap;
    /* Allow wrapping if needed */
    gap: 5px;
    width: 100%;
    /* Gap between boxes */
    margin-bottom: 15px;
    /* Add space below status boxes */
  }

  /* Individual Status Box Style (Middle Panel) */
  .status-box {
    background-color: rgba(16, 39, 82, 0.8);
    background-image: url('../../assets/img/icon-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* Reuse color */
    /* border: 1px solid #2a5caa; */
    padding: 10px;
    text-align: center;
    color: #fff;
    clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
    /* Hexagonal */
    min-width: 140px;
    /* Adjust width as needed */
    height: 80px;
    /* Adjust height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  /* Optional: Decorative lines like the original data-box */
  .status-box::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #42b4ff, transparent);
    opacity: 0.6;
  }

  .status-box-label {
    font-size: 12px;
    color: #a2cfff;
    margin-bottom: 4px;
  }

  .status-box-value {
    font-size: 18px;
    /* Slightly smaller */
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 0 5px rgba(66, 180, 255, 0.7);
    margin-bottom: 26px;
  }

  .status-box-value span {
    font-size: 11px;
    /* Unit size */
    margin-left: 3px;
    opacity: 0.8;
  }

  /* Middle Panel Diagram Area */
  .middle-panel .process-diagram-area {
    flex-grow: 1;
    position: relative;
    background: linear-gradient(to bottom, #102450, #0a1a3a);
    border: 1px solid #3a66a8;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  /* Restore SVG Placeholder styles */
  .svg-placeholder {
    background-image: url('../../assets/svgs/image.svg');
    background-size: contain;
    /* Use contain to fit the image */
    background-position: center center;
    background-repeat: no-repeat;
    flex: 1;
    /* Take up half the space */
    min-height: 200px;
    /* Ensure it has some height */
    /* Remove width/height: 90% from previous style if present */
  }

  /* New container for SVG and Table */
  .middle-main-content {
    display: flex;
    flex-grow: 1;
    /* Take remaining vertical space */
    width: 100%;
    align-items: stretch;
    /* Stretch items vertically */
    padding: 5px 10px;
    /* Add some padding */
    gap: 10px;
    /* Space between SVG and table */
    margin-bottom: 10px;
    /* Add space below SVG/Table area */
    margin-top: 10px;
    /* Add space above SVG/Table area */
  }

  /* Style for the middle table container */
  .middle-table-container {
    flex: 1;
    /* Take up half the space */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Prevent content overflow */
    border: 1px solid #06279d;
    /* Optional: Add border like tables */
    margin: 0;
    /* Reset margins */
    min-height: 200px;
    /* Match SVG min-height */
  }

  /* Middle Panel Bottom Data Boxes (inside card) */
  .data-boxes-overlay {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding-bottom: 90px;
    /* Keep original padding if needed */
    position: relative;
    /* Keep original positioning */
  }

  /* Remove data-box-row style */
  .data-box-row {
    display: none;
  }

  .data-box {
    width: 120px;
    height: 70px;
    background: linear-gradient(145deg, rgba(15, 45, 90, 0.9), rgba(5, 20, 50, 0.95));
    border: 1px solid rgba(0, 180, 220, 0.6);
    border-radius: 4px;
    position: relative;
    padding: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow:
      inset 0 0 10px rgba(0, 210, 255, 0.25),
      0 0 6px rgba(0, 180, 220, 0.15);
    transition: all 0.3s ease;
    color: #e0f8ff;
    margin: 1px;
  }

  /* Remove hexagonal clip-path */
  /* clip-path: polygon(...); */

  /* Remove horizontal lines */
  .data-box::before,
  .data-box::after {
    content: none;
  }

  .data-box-value {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.7);
  }

  .data-box-value-y {
    font-size: 18px;
    font-weight: 600;
    color: #ffd700;
    line-height: 1.2;
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.7);
  }

  .data-box-label {
    font-size: 10px;
    color: #a8e0ff;
    margin-top: 5px;
    opacity: 0.85;
    margin-bottom: 24px;
  }

  /* Left Panel Chart Styles - Keep existing */
  .left-panel .chart-card {
    flex: 1;
    margin-bottom: 5px;
  }

  .left-panel .chart-card:last-child {
    margin-bottom: 0;
  }

  .chart-card.no-header .chart-header {
    display: none;
  }

  .chart-card.no-header .chart-content {
    height: 100%;
  }

  .chart-card {
    background-color: rgba(28, 58, 99, 0.7);
    border: 1px solid rgba(90, 130, 190, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 15px rgba(11, 93, 209, 0.2);
  }

  .chart-content {
    flex-grow: 1;
    width: 100%;
  }

  /* Right Panel Styles - Keep existing, width is set above */
  .alarm-banner {
    background-image: url('../../assets/img/red-warning.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    padding: 5px 15px;
    margin-bottom: 5px;
    font-size: 13px;
    display: flex;
    align-items: center;
    border: 1px solid #c83c3c;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(200, 60, 60, 0.5);
  }

  .middle-panel .alarm-banner i {
    margin-right: 8px;
  }

  .middle-panel .status-boxes-area {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5px;
    padding: 10px 0;
    flex-wrap: wrap;
    gap: 5px;
  }

  .middle-panel .status-box {
    background-color: rgba(16, 39, 82, 0.8);
    background-image: url('../../assets/img/icon-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 10px;
    text-align: center;
    color: #fff;
    clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
    min-width: 140px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .middle-panel .status-box::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #42b4ff, transparent);
    opacity: 0.6;
  }

  .middle-panel .status-box-label {
    font-size: 12px;
    color: #a2cfff;
    margin-bottom: 4px;
  }

  .middle-panel .status-box-value {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 0 5px rgba(66, 180, 255, 0.7);
    margin-bottom: 26px;
  }

  .middle-panel .status-box-value span {
    font-size: 11px;
    margin-left: 3px;
    opacity: 0.8;
  }

  /* Right Panel Table Styles (deep selectors) - Keep existing */
  :deep(.el-table) {
    background-color: transparent !important;
    border: none !important;
  }

  :deep(.el-table tr:nth-child(odd)) {
    background-color: #0f2142 !important;
  }

  :deep(.el-table tr:nth-child(even)) {
    background-color: #142a52 !important;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: inherit !important;
  }

  :deep(.el-table td.el-table__cell),
  :deep(.el-table th.el-table__cell) {
    background-color: transparent !important;
    border-color: #06279d !important;
    color: #c0c4cc;
  }

  :deep(.el-table th.el-table__cell) {
    color: #b8e8ff;
    background-color: #183272 !important;
    border-bottom: 1px solid #06279d !important;
  }

  :deep(.el-table--border .el-table__inner-wrapper::after),
  :deep(.el-table--border::after),
  :deep(.el-table--border::before) {
    background-color: #06279d !important;
  }

  :deep(.el-table td.el-table__cell),
  :deep(.el-table th.el-table__cell.is-leaf) {
    border-bottom: 1px solid #06279d !important;
  }

  :deep(.el-table--border td.el-table__cell),
  :deep(.el-table--border th.el-table__cell) {
    border-right: 1px solid #06279d !important;
  }

  :deep(.el-table__border-left-patch) {
    background-color: #06279d !important;
  }

  :deep(.el-table--border .el-table__inner-wrapper::before) {
    background-color: #06279d !important;
  }

  /* Make NewCoilCard components fill the right panel height */
  .right-panel > .right-table-card.top-table {
    flex: 0.9;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
  }
  .right-panel > .right-table-card.bottom-table {
    flex: 0.9;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
  }
  .right-panel > .right-chart-card {
    flex: 1;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  /* 兼容原有样式，避免重复margin-bottom */
  .right-panel > .right-table-card.bottom-table {
    margin-bottom: 0;
  }

  /* Ensure the slot content area within the card takes up space */
  .right-table-card > .containerContent,
  .right-chart-card > .containerContent {
    flex-grow: 1;
    overflow: hidden;
  }

  .middle-content-card > .containerContent {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
  }

  /* 系统运行状态栏样式 */
  .system-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 2px;
    padding: 5px 15px;
    margin-bottom: 10px;
  }

  .system-status-bar-right {
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-align: right;
    white-space: nowrap;
    font-size: 13px;
  }

  .status-text {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    position: relative;
    width: 100%;
  }

  .status-icon {
    color: #0088ff;
    font-weight: 900;
    margin-right: 8px;
    font-style: normal;
  }

  .status-line {
    margin-left: 10px;
    opacity: 0.5;
  }

  .status-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
  }

  .status-smile-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }

  .status-good {
    font-size: 12px;
    color: #2af598;
  }

  /* Layout for the new top row of boxes */
  .top-data-boxes-area {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: calc(100% - 40px);
    margin: 10px auto 5px auto;
    padding: 5px 0;
    gap: 10px;
    flex-shrink: 0;
  }

  /* Style for top boxes (uses .data-box) */
  .data-box.top-box {
    /* Override base data-box styles */
    background: none;
    /* Remove gradient */
    border: none;
    /* Remove border */
    background-image: url('../../assets/img/icon-bg.png');
    /* Set new background image */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 130px;
    /* Keep adjusted width */
    height: 70px;
    /* Adjusted height slightly to better fit image ratio */
    flex-shrink: 0;
    padding: 10px 5px;
    /* Adjust padding */
    box-shadow: none;
    /* Remove original shadow */
  }

  /* Optional: Adjust text alignment if needed for the new background */
  .data-box.top-box .data-box-value {
    /* text-shadow: none; */
    /* Example: remove text shadow if it clashes */
    font-size: 20px;
    /* Example: adjust font size */
  }

  .data-box.top-box .data-box-label {
    margin-top: 2px;
    /* Adjust spacing */
  }

  /* Styles for the absolutely positioned text labels */
  .diagram-text {
    position: absolute;
    color: #fff;
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
  }

  .rapid-cool-text {
    top: 30%;
    left: 35px;
    color: #ffd700;
    font-weight: bold;
  }

  .strip-entry-text {
    top: 40%;
    right: 14%;
    font-size: 12px;
  }

  .strip-entry-text-p8 {
    top: 30%;
    left: 42%;
    font-size: 12px;
  }
  .strip-entry-text-p9 {
    top: 30%;
    left: 62%;
    font-size: 12px;
  }
  .strip-entry-text-w1 {
    top: 73%;
    left: 2%;
    font-size: 12px;
  }
  .strip-entry-text-w2 {
    top: 73%;
    left: 22%;
    font-size: 12px;
  }
  .strip-entry-text-w3 {
    top: 73%;
    left: 42%;
    font-size: 12px;
  }
  .strip-entry-text-w4 {
    top: 73%;
    left: 62%;
    font-size: 12px;
  }

  /* Styles for the new structure within the bottom .data-boxes-overlay */
  .data-boxes-overlay.new-bottom-boxes {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    /* Center rows vertically */
    align-items: center;
    gap: 15px;
    /* Increased gap between rows */
    padding: 20px 25px;
    /* Adjust padding for background */
    /* ADDED: Background image */
    border-radius: 5px;
    /* Optional: add radius if background has rounded corners */
    /* Ensure width and flex-shrink are appropriate */
    width: calc(100% - 20px);
    /* Adjust width to allow for padding */
    margin: 0 auto;
    /* Center the container */
    flex-shrink: 0;
  }

  /* Style for the new rows */
  .data-box-row {
    display: flex;
    gap: 15px;
    /* Adjust space between boxes in a row */
    width: 100%;
    justify-content: space-around;
    /* Distribute 3 boxes evenly */
  }

  /* Style for bottom boxes (inherits .data-box) */
  .data-box.bottom-box {
    flex-basis: 30%;
    /* Example: Adjust basis for 3 boxes per row */
    /* width: auto; */
    /* Let flex-basis control width */
    background-image: url('../../assets/img/en-centerbg.png');
    background-size: contain;
    /* Or cover, or specific size */
    background-position: center bottom;
    /* Position background */
    background-repeat: no-repeat;
    flex-shrink: 1;
    margin: 0;
    /* Reset margin from .data-box */
    /* Ensure height is appropriate */
    height: 70px;
  }

  .right-chart-card .chart-content {
    min-height: 180px;
  }

  .scoll-text {
    display: flex;
    align-items: center;
    max-width: 760px;
  }

  .alarm-row-one-line.ellipsis {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    margin-top: 8px;
  }

  .marquee-text {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 24s linear infinite;
    font-size: 15px;
    font-weight: 500;
    padding-left: 10px;
  }
  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .el-text {
    color: #ffd700;
  }
</style>
